<template>
    <div class="flexBox m-header height80 header-color" style="justify-content: space-between;">
        <div class="flexBox">
            <img src="../../../assets/image/logo.png" class="header-logo">
            <span class="header-title">CEMS</span>
            <div class="inb-start header-line"></div>
            <span class="font-l2">智慧工艺监控系统</span>
            <div class="inb-start schh" v-if="type !== 'login'">
                <Menu class="doy" mode="horizontal" theme="light" :active-name="activeName"  @on-select="onSelectMenu">
                  <Submenu name="1" class="xadd">
                    <template slot="title">
                      <Icon type="ios-stats"/>
                      空压系统
                    </template>
                      <MenuItem name="3-1" class="badd">工艺监视</MenuItem>
                      <MenuItem name="3-2" class="badd">工艺控制</MenuItem>
                      <MenuItem name="3-3" class="badd">工艺能效</MenuItem>
                  </Submenu>
                  <Submenu name="2" class="xadd">
                    <template slot="title">
                      <Icon type="ios-stats"/>
                      供水系统
                    </template>
                      <MenuItem name="3-1" class="badd">工艺监视</MenuItem>
                      <MenuItem name="3-2" class="badd">工艺控制</MenuItem>
                      <MenuItem name="3-3" class="badd">工艺能效</MenuItem>
                  </Submenu>
                </Menu>
            </div>
        </div>
        <div class="flexBox m-menu2 user">
            <!--<div class="inb-start txt-center col-fff font-m2">
                <p class="height20 mar-top-m">{{ dateOpt.timeStr }}</p>
                <p class="height20">{{ dateOpt.dateStr }}</p>
            </div>-->
          <div class="fullScreen contentRight" style="margin-right: 20px;font-size: 30px;">
            <Icon type="ios-home" title="返回主页" style="cursor: pointer;" @click="backHome"/>
          </div>
          <div>
            <fullscreen v-model="isFullscreen"></fullscreen>
          </div>
            <Menu mode="horizontal" class="m-dark-menu" theme="dark" :active-name="3"
                  style="margin-right: 20px;margin-left: 15px;" @on-select="onSelect">
                <Submenu :name="3" style="padding: 0 5px;">
                    <template slot="title" class="flexBox">
                        <div class="inb-start" style="height: 80px;">
                            <img class="user-img" src="../../../assets/image/icon-user.png"/>
                        </div>
                        <div class="inb-start" style="width: 60px;">
                            <p class="ellipsis">{{ user }}</p>
                        </div>
                    </template>
                    <MenuItem name="goLight" class="maskk">浅色版本</MenuItem>
                    <MenuItem name="logout" class="maskk">退出登录</MenuItem>
                    <!--<MenuGroup title="留存">-->
                        <!--<MenuItem name="3-4">用户留存</MenuItem>-->
                        <!--<MenuItem name="3-5">流失用户</MenuItem>-->
                    <!--</MenuGroup>-->
                </Submenu>
            </Menu>
        </div>
    </div>
</template>

<script>
    import { formatDate } from '../../../util/date'
    import fullscreen from '../../../components/main/components/fullscreen/index'
    import { mapState } from 'vuex'
    export default {
        name: 'TechHeader',
        directives: {},
        components: {fullscreen},
        mixins: [],
        data () {
            return {
              isFullscreen: false,
                activeName: 'energyOverview',
                dateOpt: {
                    dateStr: '',
                    timeStr: ''
                }
            }
        },
        props: {
            type: {
                type: String,
                required: false
            }
        },
        computed: {
            ...mapState(["user"])
        },
        watch: {},
        methods: {
            init() {
                this.activeName = this.$route.name;
                this.startTime();
            },
            startTime() {
                let _this = this;
                let getTime = function() {
                    let mDate = new Date();
                    let dateStr = formatDate(mDate, 'yyyy - MM - dd');
                    let timeStr = formatDate(mDate, 'hh : mm');
                    if (dateStr !== _this.dateOpt.dateStr || timeStr !== _this.dateOpt.timeStr) {
                        _this.dateOpt = {dateStr, timeStr};
                    }
                    return getTime;
                };
                setInterval(getTime(), 1000);
            },
            onSelect(selectItem) {
                if (selectItem === 'logout') {
                    this.$store.commit("user/updateState", {user: ""});
                    this.$router.push({
                        name: "login"
                    });
                }
                if (selectItem === 'goLight') {
                    this.$router.push({
                        path: "/energy/total/allcb"
                    });
                }
            },
          backHome: function () {
            this.$router.push({path: '/display'})
          },
            onSelectMenu (selectItem) {
                if (selectItem !== this.activeName) {
                    this.activeName = selectItem;
                    this.$router.push({
                        name: selectItem
                    })
                }
            }
        },
        beforeCreate () {
        },
        created () {
        },
        destroyed () {
        },
        mounted () {
            this.init()
        }
    }
</script>
<style scoped>
    .m-header {
        background-color: #111E49;
    }
    .header-color {
        color: #7DA1FF;
    }
    .header-logo {
        height: 50px;
        margin-left: 60px;
        margin-top: 15px;
    }
    .header-title {
        font-size: 36px;
        margin-left: 26px;
    }
    .header-line {
        height: 27px;
        width: 1px;
        background-color: #7092fd;
        margin: 25px 22px 0 18px;
    }
    .m-menu2 {
        margin-left: 100px;
    }

    .user-img {
        width: 33px;
        height: 33px;
        margin-right: 18px;
        margin-top: 23px;
    }

    .fullScreen {
      flex: 0 0 30px;
    }
  .coo {
    margin-right: 5px !important;
  }

    .maskk {
      color: #dbd9d9 !important;
    }
    /*sdfsdfsdfd*/
  .badd{
    height: 30px !important;
    line-height: 30px !important;
    padding: 0px 10px!important;
  }
</style>
<style>
  .xadd .ivu-select-dropdown {
    background-color: #111E49;
    padding: 0px 0px 5px 0px !important;
  }

  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
    border-bottom: 0px solid transparent !important;
  }

  .schh .ivu-menu-horizontal {
    height: 80px;
    line-height: 80px;
  }

  .schh .ivu-menu-light {
    margin-left: 150px;
  }

  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item,
  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu {
    color: #7092fd;
    font-size: 15px;
    padding: 0 5px;
    background-color: #111E49;
  }

  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item > i {
    margin-right: 15px;
  }

  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
  .schh .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
    color: #ffffff;
    border-bottom: 0px solid #4C90FD;
    background-color: #0c183e;
  }

  .schh.user .ivu-menu-dark {
    /*background-color: #111E49;*/
  }

  .schh.user .ivu-icon-ios-arrow-down:before,
  .condition-form .ivu-cascader .ivu-icon-ios-arrow-down:before {
    content: "\F33D"
  }

  .schh.user .ivu-icon-ios-arrow-up:before,
  .condition-form .ivu-cascader .ivu-icon-ios-arrow-up:before {
    content: "\F343"
  }

  .schh.user .ivu-select-dropdown {
    margin: 0;
  }

  /*.schh.user .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item,*/
  .schh.user .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
    color: #ffffff;
  }
</style>
